<template>
  <div class="main">
    <div
      :class="{ tab: true, 'cur-tab': item.index == currentIndex }"
      v-for="(item, index) in tabList"
      :key="index"
      @click.self="gotoRoute(item.index, item.path)"
    >
      {{ item.name }}
      <i
        class="el-icon-close"
        @click="shut(item.index)"
        v-show="item.index == currentIndex && tabList.length > 1"
      ></i>
    </div>
  </div>
</template>

<script>
import store from "@/store";
export default {
  data() {
    return {
      /* 动态标签列表 */
      tabList: [],
      currentIndex: "", // 当前选定的路由
    };
  },
  methods: {
    /* 点击标签切换路由 */
    gotoRoute(index, path) {
      store.commit("permission/SET_CURRENT", index);
      sessionStorage.setItem(
        "currentIndex",
        store.state.permission["currentMenu"]
      );
      this.$router.push(path);
    },
    /* 防刷新数据丢失 */
    storeList(list) {
      sessionStorage.setItem("tabList", JSON.stringify(list));
    },
    /* 进入系统时，先判断sessionStorage是否存储了列表和默认索引值 */
    init() {
      this.tabList = JSON.parse(sessionStorage.getItem("tabList")) || [
        {
          name: "人员信息",
          path: "/person",
          index: "Person",
        },
      ];
      this.currentIndex = sessionStorage.getItem("currentIndex") || "Person";
    },
    /* 关闭标签 */
    shut(index) {
      for (let i in this.tabList) {
        if (this.tabList[i].index == index) {
          this.tabList.splice(i, 1);
          //标签被删除后，当前索引指向其被删之前的标签或者最后一个标签
          if (this.tabList[i - 1] || this.tabList[this.tabList.length - 1]) {
            let tab =
              this.tabList[i - 1] || this.tabList[this.tabList.length - 1];
            this.currentIndex = tab.index;
            this.gotoRoute(tab.index, tab.path);
          }
          //刷新标签表
          this.storeList(this.tabList);
          return;
        }
      }
    },
  },
  watch: {
    /* 监听路由变化，将第一次出现的路由置入标签列表中 */
    $route(newVal, oldVal) {
      let data = newVal;
      let name = data.meta.name;
      for (let i in this.tabList) {
        if (this.tabList[i].name == name) {
          this.currentIndex = store.state.permission["currentMenu"];
          return;
        }
      }
      this.tabList.push({
        name: data.meta.name,
        path: data.path,
        index: data.name,
      });
      this.currentIndex = store.state.permission["currentMenu"];
      this.storeList(this.tabList);
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
/* tab标签 */
.tab {
  border: 0.3px solid rgb(221, 219, 219);
  font-size: 14px;
  padding: 8px 10px;
  cursor: pointer;
  margin-right: 15px;
  border-radius: 4rem;
  transition: color 0.2s;
}
/* .tab:last-child {
  border-right: 0.3px solid rgb(221, 219, 219);
} */
.tab:hover {
  color: rgb(76, 76, 231);
}
.tab > i {
  font-size: 10px;
  padding: 1px;
  transition: all 0.2s;
}
.tab > i:hover {
  border: 1px;
  background: rgb(168, 166, 166);
  color: #fff;
  border-radius: 50%;
}
.cur-tab {
  color: rgb(76, 76, 231);
}
</style>